<template>
	<div
		class="task-card"
		@click="
			showApprovalFooter
				? active
					? delArr()
					: addArr()
				: jumpTo(cardDetail.relative_url)
		"
	>
		<div
			v-if="!cardDetail.allow_batch_approval && showApprovalFooter"
			class="task-card-mask"
		></div>
		<van-checkbox
			v-if="showApprovalFooter"
			class="task-card-radio"
			:disabled="!cardDetail.allow_batch_approval"
			checked-color="var(--bl-brand-c)"
			v-model="active"
			@click="active ? delArr() : addArr()"
		></van-checkbox>
		<section :style="{ width: showApprovalFooter ? '92%' : '100%' }">
			<header class="task-card-header">
				<span class="task-card-title" :class="{ 'card-checked': active }"
					><i
						class="low-code icona-Frame7106 no-read-icon"
						v-if="myTaskActive === 'noRead'"
					></i
					>{{ cardDetail.process_type }}</span
				>
				<span class="task-card-todo" v-if="myTaskActive === 'myToDo'">{{
					$t('pages.task.todo', '待办')
				}}</span>
				<span class="task-card-todo" v-if="myTaskActive === 'agentTodo'">{{
					cardDetail.consigner?.employee_name
				}}</span>
				<span
					class="task-card-done"
					v-if="['myTask', 'bidTask'].includes(myTaskActive)"
					>{{ $t('pages.task.done', '已办') }}</span
				>
				<span class="task-card-done" v-if="myTaskActive === 'hasRead'">{{
					$t('pages.task.Read', '已读')
				}}</span>
				<img src="./images/has_done.svg" v-if="myTaskActive === 'agentTask'" />
			</header>
			<p class="task-card-theme">
				{{ cardDetail.subject }}
			</p>
			<p class="task-card-node">
				{{ cardDetail.node_name }}
			</p>
			<div class="dashed-line"></div>
			<footer class="task-card-footer">
				<div class="task-card-footer-user-info">
					<ok-avatar
						style="margin-top: -2px"
						.personInfo="cardDetail.initiator"
						width="20px"
						height="20px"
					/>
					<span class="user-info-name">{{
						`${
							cardDetail.initiator?.employee_name
								? cardDetail.initiator?.employee_name
								: ''
						} ${
							['hasRead', 'noRead'].includes(myTaskActive)
								? ''
								: $t('pages.task.Apply', '申请')
						}`
					}}</span>
				</div>
				<div class="arrive-time">
					<span>{{
						`${dateFormat(cardDetail.create_time)} ${
							currentStateMap[myTaskActive]
						}`
					}}</span>
				</div>
			</footer>
		</section>
	</div>
</template>
<script setup lang="ts">
import { dateFormat } from '@/entry_mobile/utils'
import { useRoute } from 'vue-router'
import { ref, watch, onMounted } from 'vue'
// import { t } from '@/entry_mobile/locales'
import { i18n } from '@/locales'
const { $t } = i18n
import { showFailToast } from 'vant'
const route: any = useRoute()
const active = ref(false)
const props = defineProps([
	'cardDetail',
	'myTaskActive',
	'showApprovalFooter',
	'checkedAllApproval',
	'canCheck',
	'listFull',
])
const emits = defineEmits([
	'addTaskInstanceId',
	'delTaskInstanceId',
	'checkAllCard',
])
const currentStateMap = {
	myToDo:   $t('pages.task.Arrive', '到达'),
	myTask:   $t('pages.process.select.Submit', '提交'),
	bidTask:  $t('pages.process.select.Submit', '提交'),
	agentTask:$t('pages.process.select.Submit', '提交'),
	hasRead:  $t('pages.process.select.agree', '同意'),
	noRead:   $t('pages.task.Service', '送达'),
	agentTodo:$t('pages.task.Arrive', '到达'),
}
const addArr = () => {
	if (props.cardDetail.allow_batch_approval && !props.listFull) {
		active.value = true
		emits('addTaskInstanceId', props.cardDetail.task_instance_id)
	} else {
		props.listFull && showFailToast('最多选择60条数据')
	}
}
const delArr = () => {
	if (props.cardDetail.allow_batch_approval) {
		active.value = false
		emits('delTaskInstanceId', props.cardDetail.task_instance_id)
	}
}
const jumpTo = (url: string) => {
	window.location.href = url
}
watch(
	() => props.checkedAllApproval,
	(newVal: any) => {
		if (props.cardDetail.allow_batch_approval && !props.canCheck) {
			setTimeout(() => {
				newVal ? addArr() : delArr()
			}, 10)
		}
	}
)
</script>
<style lang="less" scoped>
.task-card {
	display: flex;
	justify-content: space-between;
	width: 100%;
	background: #ffffff;
	box-shadow: 0px 0px 10px rgba(170, 170, 170, 0.25);
	border-radius: 8px;
	margin-bottom: 10px;
	padding: 16px;
	position: relative;
	overflow: hidden;
	.task-card-mask {
		top: 0;
		left: 0;
		z-index: 99;
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: rgba(255, 255, 255, 0.5);
	}
	.task-card-radio {
		min-width: 20px;
		margin-right: 3px;
		margin-top: 4px;
		align-self: flex-start;
	}
	.task-card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		img {
			position: absolute;
			top: 7px;
			right: 7px;
			width: 36px;
			height: 36px;
		}
		.task-card-title {
			display: inline-block;
			flex: 1;
			max-width: 270px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 600;
			font-size: 15px;
			color: #1f2329;
			.no-read-icon {
				display: inline-flex;
				align-items: center;
				transform: scale(0.6);
				margin-right: 2px;
				color: @rok-mobile-primary-color;
			}
		}
		.card-checked {
			color: @rok-mobile-primary-color;
		}
		.task-card-todo {
			min-width: 50px;
			font-family: 'PingFang SC';
			font-style: normal;
			text-align: right;
			font-weight: 400;
			font-size: 11px;
			color: @rok-mobile-primary-color;
		}
		.task-card-done {
			min-width: 50px;
			font-family: 'PingFang SC';
			font-style: normal;
			text-align: right;
			font-weight: 400;
			font-size: 11px;
			color: #dee0e3;
		}
	}
	.task-card-theme {
		max-width: 300px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 12px;
		color: #2b2f36;
		margin-bottom: 3px;
	}
	.task-card-node {
		display: inline-block;
		max-width: 300px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 10px;
		color: #8f959e;
		background: #f5f6f7;
		border-radius: 2px;
		padding: 0 4px;
	}
	.dashed-line {
		transform: scaleY(0.5);
		border: 0.5px dashed #e8eaed;
		margin: 8px 0;
	}
	.task-card-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		&-user-info {
			display: flex;
			align-items: center;
			.user-info-name {
				margin-left: 4px;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 12px;
				color: #8f959e;
				max-width: 150px;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}
		}
		.arrive-time {
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 12px;
			color: #8f959e;
		}
	}
}
</style>
